為什麼不直接叫 AI 寫程式？
如果直接對AI下指令說「幫我寫一個健身APP的首頁」，通常得到的結果會是AI給了一堆華而不實的程式碼，或是最後大家請AI製作出的程式都是一模一樣的。所以我第一件該做的事就是要讓AI幫助我梳理出清晰的需求規格與架構圖，而不適讓AI開始狂寫程式碼!
​
開始實戰
因為我的主題是要開發「智慧健身與習慣追蹤PWA」，所以為了讓系統更貼近事實訓練所需，我會在指令中加入具體的健身安排邏輯。
​
AI Prompt:
以下是我的核心需求:

1. 訓練排成管理: 系統以推-拉-腿作為訓練菜單安排的主要依據，讓使用者能規劃每週3~4天的訓練計劃。
2. 器材數據追蹤: 需要可以讓使用者紀錄特定器材的訓練數據(組數、重量、次數、甚至有些器材需區分左右手)，特別是滑輪機或胸推機等有多種使用方發的變化動作。
3. 習慣打卡:使用視覺化動態圖表讓使用者可以透過打卡來追蹤達成率。
   系統選型
   前端的話使用HTML5, CSS3, JavaScript。
   後端與資料庫使用整合Firebase
   架構: 必須要符合PWA標準，且支援離線使用與安裝。
   請根據以上資訊，為我產出
   1.核心功能清單 2. 資料庫草案 3. 專案目錄結構圖
   ​
   AI ANS:
   資料庫關係簡圖:
   
   ​
   專案目錄結構圖:
   ​
   vibe-fitness-pwa/
   ├── index.html # App Shell：頂欄、離線狀態、#app 掛載點
   ├── manifest.webmanifest # name、display:standalone、icons、start_url
   ├── service-worker.js # 預快取 shell、runtime 快取靜態檔
   ├── firebase.json # hosting、headers（SW、manifest）
   ├── .firebaserc
   ├── firestore.rules
   ├── firestore.indexes.json # date、variant 查詢
   ├── package.json # firebase 工具、可選 vite 僅作本機伺服器
   ├── public/
   │ └── icons/
   │ ├── icon-192.png
   │ ├── icon-512.png
   │ └── apple-touch-icon.png
   ├── css/
   │ ├── tokens.css # 顏色、間距、深色健身房風
   │ ├── base.css
   │ ├── layout.css
   │ ├── components.css
   │ └── charts.css
   ├── js/
   │ ├── main.js # 啟動：Auth、SW、router
   │ ├── router.js # hash 或 History：#/today #/plan #/workout #/habits
   │ ├── firebase/
   │ │ ├── app.js # initializeApp
   │ │ ├── auth.js
   │ │ └── db.js # getFirestore + persistentLocalCache
   │ ├── offline/
   │ │ └── status.js # online/offline UI
   │ ├── domain/
   │ │ ├── ppl.js # 3/4 天模板、星期對應
   │ │ └── laterality.js # both/left/right 規則
   │ ├── services/
   │ │ ├── plan-service.js
   │ │ ├── machine-service.js
   │ │ ├── workout-service.js
   │ │ └── habit-service.js
   │ ├── views/
   │ │ ├── today-view.js
   │ │ ├── plan-view.js
   │ │ ├── workout-view.js
   │ │ ├── machine-view.js
   │ │ ├── habits-view.js
   │ │ └── settings-view.js
   │ ├── components/
   │ │ ├── nav.js
   │ │ ├── set-row.js # 重量、次數、左右側
   │ │ ├── habit-heatmap.js
   │ │ └── chart-bars.js # 達成率動態圖（Canvas 或 SVG）
   │ └── seed/
   │ └── catalog.js # 滑輪機／胸推機等預設變化動作
   └── docs/ # 可選：本規格落地後再放
   總結
   有了這樣的規格書與目錄結構後，我它存成一個「PLANNING.md」的檔案，這樣未來在vibe coding的時候可以讓我的AI隨時參照這一個檔案，來確保我的專案有依照計畫在向前走